<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽分组</title>
  <style>
    .wrapper {
      display: flex;
      justify-content: space-around;
    }

    .box1,
    .box2 {
      border: 1px solid #000;
      padding: 20px;
      width: 300px;
    }

    .demo {
      list-style: none;
      background-color: skyblue;
      height: 40px;
      line-height: 40px;
      margin: 10px 0px;
      text-indent: 2em;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div>
      <h1>组一：知识列表</h1>
      <ul class="box1">
        <li draggable="true" class="demo">1、HTML + CSS3</li>
        <li draggable="true" class="demo">2、WEBPACK</li>
        <li draggable="true" class="demo">3、VUE</li>
        <li draggable="true" class="demo">4、React</li>
        <li draggable="true" class="demo">5、ES5/ES6</li>
      </ul>
    </div>
    <div>
      <h1>组二：喜欢</h1>
      <ul class="box2"></ul>
    </div>
  </div>
</body>

</html>

<script>
  let demo = document.querySelectorAll(".demo");
  // 当前被拖动的对象
  let currentDragDom = null;

  for (let i = 0; i < demo.length; i++) {
    demo[i].ondragstart = function (ev) {
      currentDragDom = this;
    }
  }

  let box2 = document.querySelector(".box2");

  box2.ondragover = function (ev) {
    ev.preventDefault();
  }

  box2.ondrop = function () {
    this.appendChild(currentDragDom);
  }







</script>